<template>
    <Head>
        <Title>Blog Details</Title>
    </Head>
    <PageHeader title="Blog Details" subtitle="Blog Details" :image="`${$config.public.baseUrl}images/bg/home1/5.png`"/>
    <div class="blog home blog--details padding-top padding-bottom">
        <div class="container" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
            <SinglePost />
        </div>
    </div>

    <section class="blog blog--style1  padding-bottom" data-aos="fade-up" data-aos-duration="800">
        <div class="container">
            <LatestBlog :posts="posts" />
        </div>
    </section>

    <div class="blog home blog--details padding-bottom">
        <div class="container" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
            <BlogComments />
        </div>
    </div>

    <div class="newsletter" data-aos="fade-up" data-aos-duration="800">
        <div class="container">
            <NewsLetter />
        </div>
    </div>
</template>

<script>
import PageHeader from '@/components/partials/PageHeader.vue'
import SinglePost from '@/components/modules/blog-details/SinglePost.vue'
import LatestBlog from '@/components/modules/blog-details/LatestBlog.vue'
import BlogComments from '@/components/modules/blog-details/BlogComments.vue'
import NewsLetter from '@/components/partials/newsletters/Newsletter.vue'

export default {
    components: { PageHeader, SinglePost,LatestBlog,BlogComments, NewsLetter },
    async setup() {
        const { axios } = fetchData()

        const blog = await axios.get('/blog.json')
        const posts = blog.data.posts
        return {
            posts
        }
    },
}
</script>